<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-11-15 17:36:35
-->
<template>
  <div class="vm">
    <h2 class="h-title"> </h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
  import { Map, View } from "ol";
  import {Tile} from 'ol/layer'
  import {WMTS,XYZ} from 'ol/source';
  import WMTSTileGrid from 'ol/tilegrid/WMTS'
  import {Projection} from 'ol/proj'
  import * as control from 'ol/control'


export default {
  name: 'GeoServerTileLayer',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {
      this.map = new Map({
        controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [ 
          new Tile({
            source: new XYZ({ //http://t0.tianditu.gov.cn/img_c/wmts
            //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          new Tile({
            source: new XYZ({
              url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            })
          })
      
        ],
        view: new View({ 
          projection: "EPSG:4326",
        //   projection: "EPSG:3857",
          center: [110.064839, 32.548857], 
          // minZoom:10, 
          zoom: 5 
        })
      })


      //切片名
      let matrixIds = ['tianditu4490:0', 'tianditu4490:1', 'tianditu4490:2', 'tianditu4490:3',
        'tianditu4490:4', 'tianditu4490:5', 'tianditu4490:6', 'tianditu4490:7', 'tianditu4490:8',
        'tianditu4490:9', 'tianditu4490:10', 'tianditu4490:11', 'tianditu4490:12', 'tianditu4490:13',
        'tianditu4490:14', 'tianditu4490:15', 'tianditu4490:16', 'tianditu4490:17', 'tianditu4490:18',
        'tianditu4490:19', 'tianditu4490:20', 'tianditu4490:21'];
      //分辨率
      let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625,
        0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,
        0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
        1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5,
        1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6,
        6.705522537231445E-7, 3.3527612686157227E-7];
 
      //切片策略
      let tileGrid = new WMTSTileGrid({
        tileSize: [256,256],
        extent: [-180.0,-90.0,180.0,90.0],  //范围
        origin: [-180.0, 90.0],   //切片原点
        resolutions: resolutions,   //分辨率
        matrixIds: matrixIds    //层级标识列表，与地图级数保持一致
      });
      //设置地图投影
      let projection = new Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
      });
 
      let tileSource = new WMTS({
        url: 'http://localhost/geoserver/gwc/service/wmts',
        // layer:"mytest:boul5",
        layer: "jingning:boul5_polygon_buffer",
        format: "image/png",
        matrixSet:"tianditu4490",
        projection: projection,
        // projection: "EPSG:4326",
        tileGrid: tileGrid
      });
 
      let tileLayer = new Tile({
        opacity:0.6,    //透明度
        source: tileSource,
        wrapX:false,
      })

      this.map.addLayer(tileLayer)









    },





  },
  mounted () {
    this.initMap();


  }
}
</script>

<style lang="scss" scoped>
  
</style>